<template>
	<view class="page1">
		<view class="wind-header">
			<u-form ref="uForm" :model="powerParam">


				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
					 ,fontSize: '30rpx',
					 color: '#808080'}" label="选择地区" prop="regionName">
					<u-input type="select" placeholder="请选择地区" v-model="powerParam.regionName" @click="showPicker()">
					</u-input>
				</u-form-item>

				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
        	 ,fontSize: '30rpx',
               color: '#808080'}" label="年利用小时数" prop="hours">
					<u-input type="text" v-model="powerParam.hours"></u-input>
				</u-form-item>
				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
        	 ,fontSize: '30rpx',
        	 color: '#808080'}" label="回路最多风机数(台）" prop="loopFan">
					<u-input type="text" v-model="powerParam.loopFan"></u-input>
				</u-form-item>

				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
        	 ,fontSize: '30rpx',
        	 color: '#808080'}" label="分支最多风机数(台）" prop="branchFan">
					<u-input type="text" v-model="powerParam.branchFan"></u-input>
				</u-form-item>

				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
        	 ,fontSize: '30rpx',
        	 color: '#808080'}" label="单机容量(kW)" prop="singleCapacity">
					<u-input type="text" v-model="powerParam.singleCapacity"></u-input>
				</u-form-item>

				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
        	 ,fontSize: '30rpx',
        	 color: '#808080'}" label="功率因数Cosa(h）" prop="cos">
					<u-input type="text" v-model="powerParam.cos"></u-input>
				</u-form-item>

				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
        	 ,fontSize: '30rpx',
        	 color: '#808080'}" label="输送线路的电压(kv)" prop="transmissionVoltage">
					<u-input type="text" v-model="powerParam.transmissionVoltage"></u-input>
				</u-form-item>


				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
        	 ,fontSize: '30rpx',
        	 color: '#808080'}" label="工作温度(℃）" prop="temperature">
					<u-input type="text" v-model="powerParam.temperature"></u-input>
				</u-form-item>

				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
        	 ,fontSize: '30rpx',
        	 color: '#808080'}" label="选择工程裕度(%)" prop="engineeringMargin">
					<u-input type="text" v-model="powerParam.engineeringMargin"></u-input>
				</u-form-item>

				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
        	 ,fontSize: '30rpx',
        	 color: '#808080'}" label="电流密度(A/mm2)" prop="currentDensity">
					<u-input type="text" v-model="powerParam.currentDensity"></u-input>
				</u-form-item>

			</u-form>

			<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="columns" range-key="region"
				@confirm="confirm"></u-picker>
			<view class="calcbtn-box">
				<view class="calcbtn" @click="selForm()">
					设置好了，开始选
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				columns: [{
						num: 1,
						region: "山地"
					},
					{
						num: 2,
						region: "海地"
					}
				],
				show: false,
				powerParam: {
					regionName: '', //山区
					region: 0, // 山区id
					hours: '',
					loopFan: '', //回路最多风机数
					branchFan: '', //分支最多风机数
					singleCapacity: '', //单机容量（kw）
					temperature: '', //温度
					cos: '', //cos
					transmissionVoltage: '', //输送电压
					engineeringMargin: '', // 工程裕度
					currentDensity: '', // 电流密度
				},
				rules: {
					region: [{
						required: true,
						message: '请选择地区',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}],
					hours: [{
							required: true,
							message: '请输入小时数',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.number(value)
							},
							message: '请输入数字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					loopFan: [{
							required: true,
							message: '请输入回路最多风机数',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.number(value)
							},
							message: '请输入数字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					branchFan: [{
							required: true,
							message: '请输入分支最多风机数',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.number(value)
							},
							message: '请输入数字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					singleCapacity: [{
							required: true,
							message: '请输入单机容量（kw）',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.number(value)
							},
							message: '请输入数字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					temperature: [{
							required: true,
							message: '请输入温度',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.number(value)
							},
							message: '请输入数字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					cos: [{
							required: true,
							message: '请输入cos',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.number(value)
							},
							message: '请输入数字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					transmissionVoltage: [{
							required: true,
							message: '请输入输送电压',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.number(value)
							},
							message: '请输入数字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					engineeringMargin: [{
							required: true,
							message: '请输入工程裕度',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.number(value)
							},
							message: '请输入数字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					currentDensity: [{
							required: true,
							message: '请输入电流密度',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.number(value)
							},
							message: '请输入数字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],

				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			var login = this.checkLogin();
			if (!login) {
				return false;
			}


		},
		methods: {
			// 四舍五入保留两物小数
			toDecimal(x) {
				var f = parseFloat(x);
				if (isNaN(f)) {
					return;
				}
				f = Math.round(x * 100) / 100;
				return f;
			},
			// 选中 提交form 表单
			selForm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log(this.powerParam, "aaaa")
						this.addWindPower();
						//  主干线截面
						let resultNumLoop = this.getArea(this.powerParam.loopFan, this.powerParam.singleCapacity,
							this
							.powerParam
							.transmissionVoltage, this.powerParam.currentDensity, this.powerParam.cos)

						// // 分支线截面
						let resultNumBranch = this.getArea(this.powerParam.branchFan, this.powerParam
							.singleCapacity, this
							.powerParam
							.transmissionVoltage, this.powerParam.currentDensity, this.powerParam.cos)

						let loopName = '';
						let branchName = '';
						this.$u.api.getModelArea(this.powerParam)
							.then(res => {
								if (res.code != '200') return this.$u.toast(res.msg);
								if (res.rows.length != 0) {
									loopName = res.rows[0].specificationsName
									branchName = res.rows[1].specificationsName

									// uni.navigateTo({
									//   url: '/subpackage/tool/windPowerChooseCable/windPowerChooseCableResout?param='
									// })
									uni.navigateTo({
										url: '/subpackage/tool/windPowerChooseCable/windPowerChooseCableResout?loopNum=' +
											this
											.toDecimal(
												resultNumLoop) + '&loopName=' + loopName +
											'&branchNum=' + this.toDecimal(
												resultNumBranch) + '&branchName=' + branchName +
											'&region=' + this.powerParam.region
									})
								}
							});
					} else {
						console.log('验证失败');
					}
				});
			},
			// 获取 截面面积
			getArea(T, P, Ue, J, COS) {
				// 公式 。 (T * P) /  √3 * Ue * J * COS
				let num = (T * P) / (1.732 * Ue * J * COS)
				num = num * (1 + 0.05);

				return num;
			},
			//  保存 风电选电缆 数据
			addWindPower() {
				console.log(this.powerParam, "bbbbb")
				this.$u.api.saveWindPowerInfo(this.powerParam)
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast(res)
					});
			},
			// 显示隐藏 下拉框
			showPicker() {
				this.show = true;
			},
			navigateBack() {
				uni.navigateBack()
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.show = false;
				var energy = this.columns[e[0]];
				this.powerParam.region = energy.num;
				this.powerParam.regionName = energy.region;
			},

		},
	}
</script>
<style lang="scss">
	.page1 {
		height: 100vh;
		background-color: #F7F7F7;
	}

	.wind-header {
		background-color: #FFFFFF;

		padding-left: 30rpx;
		padding-right: 30rpx;

		.item-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #808080;
		}

		.item-value {
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #333333;
		}

		.calcbtn-box {
			height: 120rpx;
			align-items: center;
			justify-content: center;
			display: flex;

			.calcbtn {
				width: 520rpx;
				height: 80rpx;
				background: #3BA2FF;
				border-radius: 44rpx;
				align-items: center;
				justify-content: center;
				display: flex;
				font-size: 32rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
			}
		}
	}

	.wind-content-data {
		height: 100%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;

		.wind-item-title {
			margin-top: 20rpx;
			margin-left: 29rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #333333;
			line-height: 48rpx;
		}

		.wind-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-left: 29rpx;
			margin-right: 29rpx;

			.left {
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #999999;
				line-height: 48rpx;
			}

			.right {
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #333333;
				line-height: 48rpx;
			}
		}
	}
</style>
